<template>
    <div class="time-range">
        <div>
            <el-time-select
                v-model="startTime"
                :max-time="endTime"
                :placeholder="startPlaceholder"
                :start="startTimeStart"
                :step="startTimeStep"
                :end="startTimeEnd"
                v-bind="$attrs.startOptions"
            />
        </div>
        <div>
            <el-time-select
                v-model="endTime"
                :min-time="startTime"
                :placeholder="endPlaceholder"
                :start="endTimeStart"
                :step="endTimeStep"
                :end="endTimeEnd"
                :disabled="endDisabled"
                v-bind="$attrs.endOptions"
            />
        </div>
    </div>
</template>

<script setup lang="ts">
  
  let props = defineProps({
    startPlaceholder: {
        type: String,
        default: '请选择开始时间'
    },
    startTimeStart: {
        type: String,
        default: '08:00'
    },
    startTimeStep: {
        type: String,
        default: '00:30'
    },
    startTimeEnd: {
        type: String,
        default: '24:00'
    },
    endPlaceholder: {
        type: String,
        default: '请选择开始时间'
    },
    endTimeStart: {
        type: String,
        default: '08:00'
    },
    endTimeStep: {
        type: String,
        default: '00:30'
    },
    endTimeEnd: {
        type: String,
        default: '24:00'
    }
  })

  let startTime = ref<string>('')
  let endTime = ref<string>('')
  let endDisabled = ref(true)

  let emit = defineEmits(['startChange', 'endChange'])
  watch(() => startTime.value, val=>{
    if (val == '') {
        endTime.value = ''
        endDisabled.value = true
    } else{
        endDisabled.value = false
        emit('startChange', val)
    }
  })

  watch(()=>endTime.value, val => {
    emit('endChange', {
        startTime: startTime.value,
        endTime: val
    })
  })
</script>

<style scoped lang="scss">
.time-range{
    display: flex;
    align-items: center;
    div:first-child{
        margin-right: 6px;
    }
}
</style>
